<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="./js/echarts.min.js"></script>
    <!-- 引入ElementUI样式 -->
    <link type="text/css" rel="stylesheet" href="./css/index.css">
    <!-- 引入Vue组件库 -->
    <script type="text/javascript" src="./js/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script type="text/javascript" src="./js/index.js"></script>
    <script type="text/javascript" src="./js/axios.min.js"></script>
</head>
<body>
<div id="app">

    <div id="main" style="width: 50%;height:400px; float: left;margin-top: 40px"></div>

    <div id="main1" style="width: 50%;height:400px; float: right;margin-top: 40px"></div>
</div>

</div>


<script>
    new Vue({
        el: "#app",
        data() {
            return{
                name:[],
                info:[],
                total:[],
                listAll:[],
            };
        },

        created() {
            //先获取数据赋值给data中相关的参数，再对echarts进行设置
            axios.get("/statistical/reservationInfo").then(resp=>{
                this.name=resp.data.data.name;
                this.info = resp.data.data.reInfo;
                this.total = resp.data.data.total;
                this.listAll = resp.data.data.data;
                this.initEcharst();
                this.initEcharst2();
            });
        },
        methods: {
            initEcharst(){
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                myChart.setOption({
                    title: {
                        text: '科室预约量统计',
                        textStyle: {
                            color: '#235894'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: this.name,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '预约人数',
                            type: 'bar',
                            barWidth: '60%',
                            data: this.total,
                        }
                    ]
                });
            },

            initEcharst2(){
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main1'));

                myChart.setOption({
                    title: {
                        text: '科室预约收入统计',
                        textStyle: {
                            color: '#235894'
                        }
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    series: [
                        {
                            name: '总收入',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: this.listAll,
                        }
                    ]
                });
            },
        },
    })
</script>

</body>
</html>